<template>
    <div style="height :100%;">
      <div class="toggle-button" @click="toggleCollapse">|||</div>
        <el-menu
            :default-active="activePath"
            class="el-menu-vertical-demo"
            background-color="#545c64"
            text-color="#fff"
            unique-opened
            :collapse="isCollapse"
            :collapse-transition="false"
            :router="true"
            active-text-color="#409eff">
                <el-submenu :index="item.functionCode" v-for="item in navMenuList" :key="item.functionCode">
                    <template slot="title">
                    <i :class="item.menuIcon"></i>
                    <span>{{item.functionChina}}</span>
                    </template>
                    <el-menu-item :index="ftem.urlString" v-for="ftem in item.vnavlist" :key="ftem.functionCode" @click="saveNavState(ftem.urlString)">
                      <i class="el-icon-menu"></i>
                      {{ftem.functionChina}}
                    </el-menu-item>
                </el-submenu>
            </el-menu>
    </div>
</template>
<style lang="stylus" scoped>
.el-menu{
  border-right :none;
}
.toggle-button{
  background-color :#4a5064;
  font-size :10px;
  color :#fff;
  text-align:center;
  letter-spacing :0.2em;
  cursor :pointer;
}
</style>
<script>
export default {
    name:'NavMenu',
    created(){
      this.getNavMenuList()
      this.activePath=window.sessionStorage.getItem("activePath")
    },
    data(){
      return{
        navMenuList:[],
        //是否折叠
        isCollapse:false,
        //被激活的连接地址
        activePath:""
      }
    },
    methods: {
      getNavMenuList(){
        this.$post('/api/Nav/GetUserNav',{}).then((res)=>{
          if(res.code==0){
            this.navMenuList=res.data
          }
        }).catch(err=>{
          console.log(err);
        })
      },
      toggleCollapse(){
        if(this.isCollapse==false){
          this.isCollapse=true;
          this.$emit('toggleCollapse',true);
        }else{
          this.isCollapse=false;
          this.$emit('toggleCollapse',false);
        }
      },
      //保存连接的状态
      saveNavState(url){
        window.sessionStorage.setItem('activePath',url)
        activePath:url
      }
    }
}
</script>